<template>
  <u-navbar
    title="藏品列表"
    :background="{ background: '#111723' }"
    title-color="#fff"
    :title-bold="true"
    back-icon-color="#fff"
    :is-back="true"
    :border-bottom="false"
    :custom-back="backMine"
  ></u-navbar>
  <view>
    <view class="nft_num">
      <image src="" mode=""></image>
      <view>藏品总数：{{ state.list.length }}</view>
    </view>
    <view class="collection_main">
      <scroll-view
        scroll-y="true"
        :style="{ height: '1100rpx' }"
        lower-threshold="30"
        @scrolltolower="bottomOut()"
      >
        <view class="collection_container">
          <view
            class="collection_box"
            v-for="(item, index) in state.list"
            :key="index"
            @click="routerPush"
          >
            <image class="box_img" mode=""></image>
            <view class="collection_item">
              <view class="item_img">
                <image :src="item.collection_image" mode="aspectFill"></image>
              </view>
              <view class="item_text">
                <view class="item_name">{{ item.collection_name }}</view>
                <view> </view>
              </view>
            </view>
            <!-- <view class="collection_bottom">
            <view class="item_nft_id">链上地址:</view>
            <view>
              <image src=""></image>
            </view>
          </view> -->
            <!-- <view class="shade">
            <view>
              <image src=""></image>
              <view>转赠中</view>
            </view>
          </view> -->
          </view>
        </view>
        <u-loadmore
          :status="state.status"
          icon-type="flower"
          margin-top="30"
          margin-bottom="30"
        />
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getOneCollectionMyNumbers } from '@/api/modules/user'
import { reactive, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const state = reactive({
  tabCurrent: 0,
  status: 'loadmore',
  list: [] as any,
  page: 0,
  id: '',
  articleNumber: ''
})
onLoad((options) => {
  console.log('options', options)
  state.id = options.collection_id as string
})
onMounted(() => {
  bottomOut()
})

// 拉底加载
const bottomOut = () => {
  console.log(111)
  if (state.status === 'nomore') return
  state.status = 'loading'
  state.page = ++state.page

  getOneCollectionMyNumbers({
    page: state.page,
    page_size: 6,
    collection_id: state.id,
    user_sale_status: 'all',
    sort_rule: 'collection_no',
    sort_type: 'desc'
  }).then((result) => {
    state.list.push(...result.data.data)
    console.log('state.list', state.list)
    if (result.data.data.length < 6) state.status = 'nomore'
    else state.status = 'loading'
  })
}

// 页面返回
const backMine = () => {
  const pages = getCurrentPages() //获取页面栈
  if (pages.length === 1) {
    //如果只有一个调用原生js
    history.back()
  } else {
    uni.navigateBack({
      delta: 1
    })
  }
}

// 页面跳转
const routerPush = () => {
  uni.navigateTo({
    url: `/pages/blind-box-details/index?id=${state.id}&type=0`
  })
}
</script>

<style lang="scss" scoped>
page {
  background: #1b1b1b;
}

.nft_num {
  width: 248rpx;
  height: 67rpx;
  background: #1e1e1e;
  box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
  border-radius: 34rpx 34rpx 34rpx 34rpx;
  margin: 32rpx 0 0rpx 32rpx;
  filter: blur(undefinedpx);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  image {
    height: 26rpx;
    width: 26rpx;
  }
  > view {
    line-height: 67rpx;
    margin-left: 14rpx;
    font-size: 26rpx;
    color: #ffd279;
  }
}
.collection_container {
  width: 686upx;
  margin: 20rpx auto;
  overflow: hidden;
  .collection_box {
    width: 332rpx;
    background: #29292b;
    border-radius: 24rpx;
    box-sizing: border-box;
    margin-top: 20upx;
    position: relative;
    float: left;
    margin-left: 22rpx;
    overflow: hidden;
    > image {
      user-select: none;
      pointer-events: none;
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
    }
    .collection_item {
      .item_img {
        width: 100%;
        border-radius: 24rpx;
        overflow: hidden;
        image {
          user-select: none;
          pointer-events: none;
          width: 332rpx;
          height: 332rpx;
          display: block;
        }
      }
      .item_text {
        padding: 20upx 20upx 10upx 20upx;
        .item_name {
          font-size: 26upx;
          color: #ffffff;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .collection_bottom {
      overflow: hidden;
      padding: 0rpx 20rpx 20rpx 20rpx;
      clear: left;
      font-size: 22upx;
      color: #666666;
      > view {
        width: calc(100% - 30rpx);
        float: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
      }
      view:nth-of-type(2) {
        width: 24rpx;
        height: 24rpx;
        float: right;
        margin-top: 5rpx;
        image {
          width: 100%;
          height: 100%;
          user-select: none;
          pointer-events: none;
        }
      }
    }
    .shade {
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.8);
      width: 332rpx;
      height: 332rpx;
      border-radius: 24rpx;
      > view {
        position: absolute;
        color: #cccccc;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
        text-align: center;
        font-size: 22rpx;
      }
      image {
        user-select: none;
        pointer-events: none;
        width: 36rpx;
        height: 36rpx;
      }
    }
  }
}
.collection_container :nth-child(2n-1) {
  margin-left: 0;
}

.footer {
  width: 330upx;
  font-size: 26upx;
  text-align: center;
  color: #666666;
  margin: 36upx auto;
}
</style>
